<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2019-10-09 21:11:00
 * @LastEditTime: 2020-05-15 12:10:13
 * @FilePath: \client\src\components\Articles.vue
 * @Description: 文章列表组件
 -->

<template>
  <b-container>
    <b-row>
      <!-- fluid属性可以使container宽度最大化 -->
      <b-col cols="12" sm="12" md="12" lg="12" xl="12">
        <b-card class="card" v-for="article in articles" :key="article.id">
          <router-link :to="'/post/' + article.id">
            <b-card-title class="title" v-html="article.title"></b-card-title>
          </router-link>
          <b-card-text class="small text-muted">
            <b-badge variant="info">{{article.type==1 ? '原创' : '转载'}}</b-badge>
            &nbsp;&nbsp;作者：{{article.author}}&nbsp;&nbsp;分类：{{article.category}}
          </b-card-text>
          <b-card-text>{{article.tabloid}}</b-card-text>
          <b-card-text class="small text-muted">
            <b-icon icon="calendar" font-scale="1.3"></b-icon>
            {{article.gmtUpdate}}
            <b-icon icon="eye" font-scale="1.3"></b-icon>
            {{article.views}}
            <b-icon icon="chat" font-scale="1.3"></b-icon>
            {{article.comments}}
            <div class="tag-box">
              <b-link class="tag" variant="info" v-for="(tag,index) in article.tags" :key="index">
                <i class="icon iconfont icon-tag"></i>
                {{tag}}
              </b-link>
            </div>
          </b-card-text>
        </b-card>
      </b-col>
      <b-col cols="12" sm="12" md="12" lg="12" xl="12">
        <!-- 分页 -->
        <div class="overflow-auto pagination" v-if="totalPages>1">
          <b-pagination-nav
            :link-gen="linkGen"
            :number-of-pages="totalPages"
            use-router
            :value="currentPage"
          ></b-pagination-nav>
        </div>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import router from "@/router/index";
import url from "@/request/url";

export default {
  name: "Articles",
  data() {
    return {};
  },
  methods: {
    linkGen(pageNum) {
      return pageNum === 1 ? "?" : `?page=${pageNum}`;
    }
  },
  computed: {
    ...mapState({
      articles: state => state.articles.data,
      totalPages: state => state.articles.totalPages,
      currentPage: state => state.articles.currentPage
    })
  },
  watch: {
    // 监听路由变化,这样设计的原因在于：查看文章之后点击浏览器回退键之后还会返回当前页面
    $route(to, from) {
      this.setCurrentPage(to.query.page || 1);
      this.getArticles();
    }
  },
  methods: {
    ...mapMutations(["setPageInfo", "setCurrentPage"]),
    ...mapActions(["getArticles"]),
    linkGen(pageNum) {
      return `?page=${pageNum}`;
    }
  },
  created() {
    let page = this.$route.query.page;
    // 当用户点击刷新之后，仍能停留在当前页面
    this.setCurrentPage(page || 1);
    this.getArticles();
  }
};
</script>

<style scoped>
.card {
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
}
.header-text {
  font-size: 16px;
  font-weight: bold;
  color: #535353ad;
}
.title {
  font-size: 20px;
}

.tag-box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  float: right;
}
.tag {
  text-decoration: none;
  margin-right: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.pagination {
  margin-top: 12px;
  float: right;
}
</style>
